<template>
  <div class="container">
    <van-nav-bar title="记录详情" left-text="返回" right-text left-arrow @click-left="onClickLeft" fixed/>
    <div class="card" v-for="(item,index) in initData.list" :key="index">
      <div class="name">{{item.goodsName}}</div>
      <div class="box">
        <div class="row">
          <div class="left">{{item.material_name}}</div>
          <div class="center">单价：{{item.price}}元</div>
          <div class="right">下单数量：{{item.number}}</div>
        </div>
        <div class="row">
          <div class="left">实际收货：{{item.all_receive_number||0}}</div>
          <div class="right">
            <div class="recordBtn" @click="showGoodsRecordMethod(item.order_detailed_id,item.all_receive_number?item.all_receive_number:0)">收货记录</div>
            <div class="goodsBtn" @click="showGoodsMethod(item.order_detailed_id)">收货</div>
          </div>
        </div>
      </div>
    </div>
    <div class="goods">
      <van-dialog v-model="showGoods" title="收货" show-cancel-button @confirm="goodsConfirm">
        <input type="text" placeholder="请输入实际收货数量" v-model="receive_number">
      </van-dialog>
    </div>
    <div class="goodsRecord">
      <van-dialog
        v-model="showGoodsRecord"
        title="收货记录"
        show-cancel-button
        @confirm="goodsRecordConfirm"
      >
        <div class="title">实际收货：{{all_receive_number}}</div>
        <div class="recordList">
          <div class="listItem" v-for="(item,index) in goodsRecord" :key="index">
            <div class="left">{{item.receive_time}}</div>
            <div class="right">收货：{{item.receive_number}}</div>
          </div>
        </div>
      </van-dialog>
    </div>
  </div>
</template>
<script>
export default {
  name: "recordDetail",
  data() {
    return {
      initData: {},
      showGoods: false,
      showGoodsRecord: false,
      receive_number: 0,
      goodsRecord: [],
      all_receive_number:0,
      order_detailed_id:"",
    };
  },
  mounted() {
    this.getInitData();
    
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    async getInitData() {
      let params = {
        user_id: this.$cookies.get("user_id"),
        order_id: this.$route.query.order_id
      };
      const res = await this.$axios.post(this.$api.order_detailed, params);
      if (res.code == 1) {
        this.initData = res.data;
        
      } else {
        this.$toast(res.msg);
      }
    },
    showGoodsMethod(id) {
      this.showGoods = true;
      this.order_detailed_id=id;
    },
    showGoodsRecordMethod(id,number) {
      this.showGoodsRecord = true;
      this.all_receive_number=number;
      this.order_detailed_id=id;
      this.goodsRecordMethod(id);
    },
    async goodsConfirm() {
      let params = {
        params: {
          user_id: this.$cookies.get("user_id"),
         order_detailed_id: this.order_detailed_id,
          receive_number: this.receive_number
        }
      };
      const res = await this.$axios.get(this.$api.add_order_receive, params);
      if (res.code == 1) {
        this.showGoods = false;
        this.getInitData();
      } else {
        this.$toast(res.msg);
      }
    },
    goodsRecordConfirm() {
      this.showGoodsRecord = false;
    },
    //收货记录
    async goodsRecordMethod(id) {
     
      let params = {
        params: {
          order_detailed_id:id
        }
      };
      const res = await this.$axios.get(this.$api.order_receive_list, params);
      if (res.code == 1) {
        this.goodsRecord=res.data;
      } else {
        this.$toast(res.msg);
      }
    }
  }
};
</script>
<style scoped>
.container {
  padding: 0.46rem 0.15rem 0;
}
.card {
  background: #fff;
  padding: 0.15rem;
  margin-top: 0.1rem;
  border-radius: 0.05rem;
  color: #999999;
}
.card > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card .row1 {
  margin-bottom: 0.05rem;
}
.card .name {
  margin-bottom: 0.1rem;
}
.card .row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.1rem;
}
.card .row .right {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.box {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.recordBtn,
.goodsBtn {
  width: 0.8rem;
  height: 0.24rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #06d039;
  line-height: 0;
  border-radius: 3px;
  color: #06d039;
}
.goodsBtn {
  margin-left: 0.2rem;
}
.goods >>> .van-dialog__content {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.2rem 0;
}
.goods >>> .van-dialog__content input {
  border: 1px solid #cccccc;
  height: 0.3rem;
  border-radius: 3px;
  padding-left: 0.1rem;
}
.goodsRecord >>> .van-dialog__content {
  display: flex;
  /* justify-content: center; */
  align-items: center;
  padding: 0.3rem 0.2rem;
  flex-direction: column;
}
.goodsRecord >>> .van-dialog__content .title {
  width: 100%;
  margin-bottom: 0.1rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.goodsRecord >>> .van-dialog__content .recordList {
  width: 100%;
}

.goodsRecord >>> .van-dialog__content .recordList .listItem {
  width: 100%;
  margin-bottom: 0.1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>


